<script lang="ts" setup>
import desktop from '@/components/virtual'
import { Route } from '@/router'
import { useCourseSessionStore } from '@/stores/useCourseStore'
import Chapter from '@/views/chapter'
import ClassStep from '@/views/classStep'
import { ref, Ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'

const { t } = useI18n()
const router = useRouter()

const course = useCourseSessionStore()
const document = course.document

//放弃比赛
const M_giveUp = async () => {
  router.replace({ name: Route.COMPETITION })
}

//收缩侧边
const collapsed = ref<boolean>(true)

//是否展示classstep
const isShowStep: Ref<boolean> = ref(false)

const selectTopic = ref<number>(0)
</script>

<template>
  <div id="study" class="w-full h-screen overflow-hidden">
    <a-row class="h-full">
      <a-col :span="8" class="h-full">
        <a-layout class="h-full">
          <a-layout-sider v-model:collapsed="collapsed">
            <div
              class="flex flex-col items-center justify-start w-full h-full bg-white border-l-0 border-gray-100 border-solid border-y-0 border-r-1"
            >
              <div
                class="w-full h-4.25rem flex flex-col items-center justify-center border-x-0 border-b-1 border-solid border-t-0 border-gray-100"
                @click="M_giveUp()"
              >
                <span class="block w-5 h-5 i-majesticons:door-exit-line"></span>
              </div>
              <div
                :class="{ 'bg-blue-100': !isShowStep }"
                class="w-full h-4.25rem flex flex-col items-center justify-center"
                @click="
                  () => {
                    isShowStep = false
                  }
                "
              >
                <span class="block w-5 h-5 i-material-symbols:event-list-rounded"></span>
                <span>{{ t('detail.menu.class_step') }}</span>
              </div>
              <div
                :class="{ 'bg-blue-100': isShowStep }"
                class="w-full h-4.25rem flex flex-col items-center justify-center"
                @click="
                  () => {
                    isShowStep = true
                  }
                "
              >
                <span class="block w-5 h-5 i-ic:round-menu-book"></span>
                <span>{{ t('detail.menu.chapter') }}</span>
              </div>
            </div>
          </a-layout-sider>
          <a-layout>
            <a-layout-header class="h-4.25rem bg-opacity-20 bg-white px-0">
              <a-row align="middle" class="w-full h-full" type="flex">
                <a-col :offset="2" :span="20">
                  <span class="font-bold text-1rem">{{ document?.title }}</span>
                </a-col>
              </a-row>
            </a-layout-header>
            <a-layout-content>
              <ClassStep v-if="isShowStep" :selectTopic="selectTopic" />
              <Chapter
                v-else
                @step="
                  (n) => {
                    selectTopic = n
                    isShowStep = true
                  }
                "
              />
            </a-layout-content>
          </a-layout>
        </a-layout>
      </a-col>

      <a-col :span="16" class="h-full">
        <div class="w-full h-full">
          <desktop />
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<style lang="less">
.icon {
  @apply w-6 h-6;
}
#study {
  .ant-layout-content {
    @apply relative;
    height: 100vh;
  }
  .ant-menu-item-selected {
    background-color: #fff;
  }
}
</style>
